<template>
  <a-row type="flex" style="flex-flow: inherit;">
    <a-col :flex="toggle ? '260px' : '30px'" style="margin-right: 12px;background-color: #fff;">
      <depart-tree :rootOpened="true" :multi="false" @ok="getTreeData" @toggleBool="toggleBool" />
      <!-- <groups-tree @tree="getTreeData" @selectedKeys="getSelectedKeys" /> -->
    </a-col>
    <a-col flex="auto">
      <a-card :bordered="false" style="margin-bottom: 10px">
        <!-- 查询区域 -->
        <div class="table-page-search-wrapper" style="position: relative">
          <div class="search-wrapper-btn">
            <a-button type="link" @click="show = !show">
              <span v-if="!show">展开
                <a-icon type="down" />
              </span>
              <span v-else>收起
                <a-icon type="up" />
              </span>
            </a-button>
          </div>
          <a-form-model :label-col="labelCol" :wrapper-col="wrapperCol" @keyup.enter.native="onQuery">
            <div class="mode_item">
              <div class="mode_item_div">
                <a-form-model-item label="人员姓名">
                  <a-input v-model="pageFilter.sjskPersonName" placeholder="请输入" />
                </a-form-model-item>
              </div>
              <div class="mode_item_div">
                <a-form-model-item label="人员类型">
                  <a-select v-model="pageFilter.sjskType" placeholder="请选择">
                    <a-select-option value="1">社区戒毒</a-select-option>
                    <a-select-option value="2">社区康复</a-select-option>
                  </a-select>
                </a-form-model-item>
              </div>
              <div class="mode_item_div">
                <a-form-model-item label="预约时间">
                  <a-range-picker v-model="timeValue" style="width:100%;" valueFormat="YYYY-MM-DD"
                    @change="onTimeChange" />
                </a-form-model-item>
              </div>
              <!-- <div class="mode_item_div">
                <a-form-model-item label="访谈类型">
                  <a-select v-model="pageFilter.name" placeholder="请选择">
                    <a-select-option value="1">定期访谈</a-select-option>
                    <a-select-option value="2">日常访谈</a-select-option>
                  </a-select>
                </a-form-model-item>
              </div> -->
            </div>
            <div class="mode_item" v-show="show">
              <div class="mode_item_div mode_item_flex">
                <a-form-model-item label="状态">
                  <a-radio-group v-model="pageFilter.status">
                    <a-radio value="">全部</a-radio>
                    <a-radio value="1">待预约</a-radio>
                    <a-radio value="2">待录入</a-radio>
                    <a-radio value="3">补录申请中</a-radio>
                    <a-radio value="4">取消申请中</a-radio>
                    <a-radio value="5">已逾期</a-radio>
                  </a-radio-group>
                </a-form-model-item>
              </div>
            </div>
            <div class="btnBox">
              <a-form-model-item :wrapper-col="{ offset: 0 }" style="margin-bottom: 0">
                <a-button type="primary" @click="onQuery"> 查询 </a-button>
                <a-button style="margin-left: 10px" @click="onResetForm"> 重置 </a-button>
              </a-form-model-item>
            </div>
          </a-form-model>
        </div>
      </a-card>
      <a-card :bordered="false">
        <!-- 操作按钮区域 -->
        <div class="table-operator">
          <a-button @click="onOut()">导出</a-button>
        </div>
        <!-- 表格展示 -->
        <div class="table-page-content">
          <a-alert type="info" :showIcon="true">
            <div slot="message">
              截至目前，待预约 <span class="s1"> {{ infoObj.waitAppointmentNum }} </span> 人，待录入 <span class="s1"> {{
    infoObj.waitDetectNum
}} </span> 人，取消申请中 <span class="s1"> {{ infoObj.cancelNum }}
              </span> 人，补录申请中 <span class="s1"> {{ infoObj.collectionNum }} </span> 人，已逾期 <span class="s1"> {{
    infoObj.overdueNum
}} </span> 人
            </div>
          </a-alert>
          <z-table ref="table" rowKey="id" :showAlert="false" :showSelection="false" :loading="loading"
            :columns="columns" :dataSource="pageData" @change="onTableChange">
            <template slot="sjskType" slot-scope="text">
              <span v-if="text == '1'">社区戒毒</span>
              <span v-if="text == '2'">社区康复</span>
            </template>
            <template slot="interviewNum" slot-scope="text">
              <span>第{{ text }}次</span>
            </template>
            <template slot="interviewTime" slot-scope="text, record">
              <span>{{ record.interviewStartTime }} ~ {{ record.interviewEndTime }}</span>
            </template>
            <template slot="interviewAppointmentTime" slot-scope="text, record">
              <span v-if="record.interviewAppointmentStartTime == null">--</span>
              <span v-else>{{ record.interviewAppointmentStartTime }} ~ {{ record.interviewAppointmentEndTime }}</span>
            </template>
            <template slot="status" slot-scope="text,record">
              <span v-if="text == '1'" style="color:#27BF44">待预约</span>
              <span v-if="text == '2'" style="color:#108EE9">待录入</span>
              <span v-if="text == '3'" style="color:#FAAD14">补录申请中</span>
              <span v-if="text == '4'" style="color:#FAAD14">取消申请中</span>
              <span v-if="text == '5'" style="color:#D9001B">已逾期 <a-tag color="red" style="margin-left:5px;"
                  v-if="record.overdueResponsibilityName">
                  {{ record.overdueResponsibilityName }}
                </a-tag></span>
            </template>
            <!--操作-->
            <template slot="action" slot-scope="text, record">
              <template v-if="record.status == '1'">
                <a-button @click="onBooking(2, record)" type="link" style="padding: 0">预约访谈
                </a-button>
                <a-divider type="vertical" />
              </template>
              <template v-if="record.status == '1' || record.status == '2'">
                <a-button @click="onInput(1, record)" type="link" style="padding: 0">谈话录入</a-button>
                <a-divider type="vertical" />
              </template>
              <template v-if="record.status == '2'">
                <a-button @click="onBooking(3, record)" type="link" style="padding: 0">改约</a-button>
                <a-divider type="vertical" />
              </template>
              <template
                v-if="record.status == '3' || record.status == '4' || record.overdueResponsibilityName != '专干' && record.status == '5'">
                <a-button @click="onCYX(record)" type="link" style="padding: 0">催一下</a-button>
                <a-divider type="vertical" />
              </template>
              <template
                v-if="record.status == '3' || record.status == '4' || record.overdueResponsibilityName != '专干' && record.status == '5'">
                <a-button @click="onCX(record)" type="link" style="padding: 0">撤销申请</a-button>
                <a-divider type="vertical" />
              </template>
              <template v-if="record.status == '5' && record.overdueResponsibilityName == '专干'">
                <a-button @click="onInput(2, record)" type="link" style="padding: 0">谈话补录</a-button>
                <a-divider type="vertical" />
              </template>
              <template v-if="record.status != '1' && record.overdueResponsibilityName != '专干'">
                <a-button @click="onDetail(record)" type="link" style="padding: 0">查看</a-button>
                <a-divider type="vertical" />
              </template>
              <a-button @click="onHistory(record)" type="link" style="padding: 0">历史记录</a-button>
              <a-divider type="vertical" />
              <template
                v-if="record.status == '1' || record.status == '2' || record.overdueResponsibilityName == '专干' && record.status == '5'">
                <a-button @click="onCancel(record)" type="link" style="padding: 0">取消</a-button>
              </template>
            </template>
          </z-table>
        </div>
        <BookingModal ref="scheduleModalId" title="访谈预约" @ok="onQuery" />
        <AddInterviewModal ref="addInterviewModalId" @ok="onQuery" />
        <CancelModal ref="cancelModalId" @ok="onQuery" />
        <DetailModal ref="detailModalId" />
      </a-card>
    </a-col>
  </a-row>
</template>

<script>
import * as interviewApi from '@/api/sjsk/help/interview.js'
import * as uroscopyApi from '@/api/sjsk/check/uroscopy.js'
import { getDictItemsFromCache } from '@/api/api'
import { downLoadFileReader } from '@/utils/export-util/util'
import BookingModal from './modules/BookingModal'
import AddInterviewModal from './modules/AddInterviewModal'
import CancelModal from './modules/CancelModal'
import DetailModal from './modules/DetailModal'
import DepartTree from '@/views/sjsk/modules/departTree'
import Vue from 'vue'
import { USER_INFO } from "@/store/mutation-types"
import { getUrge } from '@/api/sjsk/flowService'
export default {
  components: {
    BookingModal,
    AddInterviewModal,
    CancelModal,
    DepartTree,
    DetailModal
  },
  data() {
    return {
      labelCol: { span: 6 },
      wrapperCol: { span: 16 },
      show: false,
      loading: false,
      visible: false,
      reloading: false,
      timeValue: [],
      treeDatas: [],
      toggle: true,
      columns: [
        {
          title: '序号',
          dataIndex: 'order',
          width: 60,
          align: 'center',
          customRender: (text, record, index) =>
            `${(this.pageFilter.pageNo - 1) * this.pageFilter.pageSize + (index + 1)}` //序号分页后连续
        },
        {
          title: '姓名',
          dataIndex: 'realName',
          align: 'center',
        },
        {
          title: '身份证号',
          dataIndex: 'identityCard',
          align: 'center',
        },
        {
          title: '人员类型',
          dataIndex: 'sjskType',
          align: 'center',
          scopedSlots: { customRender: 'sjskType' },
        },
        {
          title: '访谈次数',
          dataIndex: 'interviewNum',
          align: 'center',
          scopedSlots: { customRender: 'interviewNum' },
        },
        {
          title: '计划时间',
          dataIndex: 'interviewTime',
          align: 'center',
          scopedSlots: { customRender: 'interviewTime' },
        },
        {
          title: '状态',
          width: 180,
          dataIndex: 'status',
          align: 'center',
          scopedSlots: { customRender: 'status' },
        },
        {
          title: '预约时间',
          dataIndex: 'interviewAppointmentTime',
          align: 'center',
          scopedSlots: { customRender: 'interviewAppointmentTime' },
        },
        {
          title: '操作',
          width: 290,
          align: 'center',
          dataIndex: 'action',
          scopedSlots: { customRender: 'action' },
        },
      ],
      pageFilter: {
        pageNo: 1,
        pageSize: 10,
      },
      pageData: {},
      userInfo: {},
      infoObj: {},
      departmentId: "",
      // bookTitle: "尿液检测预约",
      // addTitle: "尿液检测结果",
    }
  },
  created() {
    this.userInfo = Vue.ls.get(USER_INFO)
  },
  // watch: {
  //   // 组织机构树-联动筛选人员列表
  //   'pageFilter.departmentId'(newVal, oldVal) {
  //     this.onQuery()
  //   }
  // },
  methods: {
    onQuery() {
      this.pageFilter.pageNo = 1
      this.getStatistical()
      this.refreshTable()
    },
    onResetForm() {
      this.pageFilter = {
        pageNo: 1,
        pageSize: 10,
        departmentId: this.departmentId
      }
      this.timeValue = []
      this.refreshTable()
    },
    onTimeChange(date) {
      this.$set(this.pageFilter, 'interviewAppointmentStartTime', date[0])
      this.$set(this.pageFilter, 'interviewAppointmentEndTime', date[1])
    },
    onTableChange(pagination, pageFilter, sorter) {
      let keyMap = { currentPage: 'pageNo' }
      let paginations = Object.keys(pagination).reduce((newData, key) => {
        let newKey = keyMap[key] || key
        newData[newKey] = pagination[key]
        return newData
      }, {})
      this.pageFilter = Object.assign({}, this.pageFilter, paginations)
      this.refreshTable()
    },
    getStatistical() {
      interviewApi.interviewRecordStatistical(this.userInfo.id).then((res) => {
        if (res.success) {
          this.infoObj = res.result ? res.result : {}
        }
      })
    },
    refreshTable() {
      this.loading = true
      interviewApi.waitInterviewRecordList(this.pageFilter).then((res) => {
        if (res.success) {
          this.pageData = res.result ? res.result : {}
          this.loading = false
        } else {
          this.pageData = {}
          this.$message.warn(res.message)
          this.loading = false
        }
      })
        .catch((e) => {
          this.loading = false
          this.$message.warn('请求失败！')
        })
    },
    onBooking(type, record) {
      if (type == 2) { //预约
        this.$refs.scheduleModalId.show(2, record)
      }
      if (type == 3) { //改约
        this.$refs.scheduleModalId.show(3, record)
      }
    },
    onInput(type, record) {
      this.$refs.addInterviewModalId.show(type, record)
    },
    onHistory(record) {
      this.$router.push({
        path: "/interview/record",
        query: {
          sjskPersonId: record.sjskPersonId
        }
      })
    },
    onDetail(record) {
      this.$refs.detailModalId.show(record.id)
    },
    onCancel(record) {
      this.$refs.cancelModalId.show(record)
    },
    onCYX(record) {
      getUrge({ taskId: record.id, taskType: '19' }).then((res) => { //取消常规尿液检测审批
        if (res.success) {
          this.$message.success(res.message);
          this.onQuery()
        } else {
          this.$message.warning(res.message);
        }
      });
      // uroscopyApi.urge({ businessId: record.id, urineType: record.urineType }).then((res) => {
      //   if (res.success) {
      //     this.$message.success(res.message);
      //     this.onQuery()
      //   } else {
      //     this.$message.warning(res.message);
      //   }
      // });
    },
    onCX(record) {
      let that = this;
      // let flowType = ""
      // if (record.urineType == 1) flowType = "18" //常规尿检,审批流程类型18
      // if (record.urineType == 2) flowType = "19" //突击尿检,审批流程类型19
      // if (record.urineType == 3) flowType = "20" //常规发检,审批流程类型20
      // if (record.urineType == 4) flowType = "21" //突击发检,审批流程类型21
      this.$confirm({
        title: `还在审批中，确定要撤销吗?`,
        okText: "确认",
        okType: "danger",
        cancelText: "取消",
        onOk() {
          uroscopyApi.undoApply({ taskId: record.id, type: '24' }).then((res) => { //取消定期访谈审批，审批流程类型24
            if (res.success) {
              that.$message.success(res.message);
              that.onQuery()
            } else {
              that.$message.warning(res.message);
            }
          });
        }
      });
    },
    onOut() {
      interviewApi.waitInterviewRecordListExportXls(this.pageFilter).then(async res => {
        const fileName = '待访谈人员.xls'
        await downLoadFileReader(res, fileName)
      })
    },
    /** 重新加载组件 */
    reload() {
      this.reloading = true
      this.$nextTick(() => (this.reloading = false))
    },
    // 选中组织架构树，赋值到人员列表搜索框
    getTreeData(datas, id) {
      if (id != undefined && id != null && id != "") {
        this.departmentId = id
        this.$set(this.pageFilter, 'departmentId', id)
        this.onQuery()
      }
    },
    toggleBool(bool) {
      console.log(bool)
      this.toggle = bool
    }
  },
}
</script>
<style lang="less" scoped>
.mode_item {
  display: flex;
  border-bottom: 1px #dadada dashed;

  .mode_item_div {
    width: 27%;
    padding: 5px 0;

    .ant-form-item {
      margin-bottom: 0;
    }

    /deep/ .ant-col-16 {
      width: 73.8%;
    }
  }

  &>* {
    width: 100%;
    margin-bottom: 0;
    padding: 10px 0;
  }
}

.mode_item_flex {
  width: 70% !important;

  /deep/ .ant-col-6 {
    width: 9.5% !important;
  }

  /deep/ .ant-col-16 {
    width: 83.8% !important;
  }
}

.search-wrapper-btn {
  position: absolute;
  right: 12.5%;
  top: 9px;
  z-index: 100;
}

.btnBox {
  position: absolute;
  right: -5px;
  top: 5px;
  z-index: 120;
}

.s1 {
  color: #1890FF;
}

@import '~@assets/less/common.less';
</style>
